<template>
  <a-col :md="6" :sm="12">
    <a-form-item :label="label" :extra="extra" v-if="visible">
      <!--文本框-->
      <a-input v-if="types.includes(type)"  v-decorator="decorator" allowClear :type="type" :placeholder="'请输入'+label"></a-input>
      <!--下拉框-->
      <a-select v-if="type=='select'" v-decorator="decorator" :showSearch='showSearch'  optionFilterProp="children" :placeholder="'--请选择'+label+'--'"  @change="valueChange">
        <a-select-option value="" v-if="showAll">全部</a-select-option>
        <a-select-option :value="item[valueKey]" v-for="item in selectData">{{item[labelKey]}}</a-select-option>
      </a-select>

      <!--级联选择-->
      <a-cascader v-if="type=='cascader'" v-decorator="decorator" :placeholder="'请选择'+label" :options="selectData" @change="onChange" changeOnSelect/>

      <!--日期-->
      <a-date-picker v-if="type=='date'" v-decorator="decorator"  allowClear :placeholder="'请选择'+label" @change="dateChange"></a-date-picker>

      <!--月份-->
      <a-month-picker v-if="type=='month'" v-decorator="decorator" :placeholder="'请选择'+label" @change="monthChange"></a-month-picker>

        <!--日期范围-->
      <a-range-picker v-if="type=='range'" v-decorator="decorator" format="YYYY-MM-DD" @change="rangeDateChange"/>
      <slot></slot>
    </a-form-item>
  </a-col>
</template>
<script>
  import { listToTree2 } from '../utils/util'

  export default {
    name: 'fSearchFormItem',
    inject: ['queryParam'],
    props: {
      data: {
        type: [String, Array],
        required: false,
        default: null
      },
      visible:{
        type: Boolean,
        default: true
      },
      params: {
        type: Object,
        default: () => {
        }
      },
      /*是否自动加载数据*/
      autoLoad: {
        type: Boolean,
        default: true
      },
      showAll: {
        type: Boolean,
        default: true
      },
      extra: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'text'
      },
      rangeConfig: {
        type: Object,
        default: () => {
          return {
            beginName: 'beginDate',
            endName: 'endDate'
          }
        }
      },
      name: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: ''
      },
      value: {
        type: [Number, String, Array],
        required: false,
        default: ''
      },
      options: {
        type: String,
        required: false,
        default: ''
      },
      showSearch: {
        type: Boolean,
        default: true
      },
      valueKey: {
        type: String,
        default: 'value'
      },
      labelKey: {
        type: String,
        default: 'label'
      }
    },
    data() {
      return {
        selectData: [],
        types: ['text', 'textarea', 'password']
      }
    },
    computed: {
      decorator: function() {
        let obj = [this.name]
        let config = {}
        //config.initialValue = this.value
        obj.push(config)
        return obj
      },
      getData: function() {
        return this.$moment().format()
      }
    },
    methods: {
      rangeDateChange(data1, data2) {
        this.queryParam[this.rangeConfig.beginName] = data2[0]
        this.queryParam[this.rangeConfig.endName] = data2[1]
      },
      valueChange(value) {
        console.log('changed', value)
        this.$emit('change', value)
      },
      dateChange(data1, data2) {
        this.queryParam[this.name] = data2
      },
      monthChange(data1, data2) {
        this.queryParam[this.name] = data2
      },
      onChange(value, opt) {
        console.log(value)
      },
      initData: function(params) {
        this.http.get(this, {
          url: this.data,
          params: params,
          success: function(me, data) {
            if (me.type == 'cascader') {
              me.selectData = listToTree2(data, {
                primaryKey: 'categoryId',
                titleKey: 'categoryName'
              })
            } else {
              me.selectData = data
            }
          }
        })
      }
    },
    created() {
      if (this.options) {
        this.http.get(this, {
          url: this.options,
          data: {
            params: {}
          },
          success: function(me, data) {
            let obj = listToTree2(data, {
              primaryKey: 'categoryId',
              titleKey: 'categoryName'
            })
            me.selectData = obj
          }
        })
      }
      if (this.data) {
        if (typeof this.data == 'object') {
          this.selectData = this.data
        }
        if (typeof this.data == 'string') {
          this.initData(this.params)
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .popupClass {
    height: 500px;
  }

</style>
